<script setup lang="ts">
import { ref, nextTick, onBeforeMount } from 'vue'
import { useCategoryStore } from '@/store/category.ts'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'
import type {
  attrItemType,
  attrValueType
} from '@api/product/attr/type.ts'

const { form, attrList, loading, attrParams } = storeToRefs(useCategoryStore())

const { deleteAttrInfoFn, saveAttrInfoFn } = useCategoryStore()
const categoryStore = useCategoryStore()

// 点击按钮删除属性与属性值
const handleDeleteFn = async (id: number) => {
  deleteAttrInfoFn(id)
}

// 点击添加、编辑按钮
const screen = ref(false)
const handleAddAttrFn = (row: attrItemType) => {
  screen.value = true
  if(row.id) {
    // 浅拷贝，用户点击取消也会导致页面有数据
    // attrParams.value = row
    // 深拷贝
    Object.assign(attrParams.value, JSON.parse(JSON.stringify(row)))
  } else{
    attrParams.value.categoryId = form.value.category3Id
  }
}

// 点击取消按钮返回属与属性值页面
const handleCencalFn = () => {
  screen.value = false
  attrParams.value = {
    attrName: '',
    attrValueList: [],
    categoryId: '',
    categoryLevel: 3,
  }
}

// 点击添加属性值按钮
const addAttrFn = () => {
  attrParams.value.attrValueList.push({
    valueName: '',
  })
}

// 点击保存按钮
const handleSaveFn = async () => {
  const res = await saveAttrInfoFn()
  if (res) {
    screen.value = false
    attrParams.value = {
      attrName: '',
      attrValueList: [],
      categoryId: '',
      categoryLevel: 3,
    }
  }
}

// 自定义指令
const vFocus = {
  mounted (el: any) {
    nextTick(() => {
      el.children[0].children[0].focus()
    })
  }
}

// 输入框失焦隐藏输入框显示div
const blurInputFn = (row: attrValueType, index: number) => {
  if(!row.valueName) return
  
  // 当有相同内容且索引不一样时，禁止其失焦
  const flag = attrParams.value.attrValueList.some((item, i) => i !== index && item.valueName === row.valueName)
  if(flag) {
    ElMessage.warning('不可添加重复数据')
    return
  }
  row.flag = true
}

// 页面销毁前生命周期
onBeforeMount(() => {
  categoryStore.$reset()
})
</script>

<template>
  <div>
    <!-- 三级分类组件 -->
    <Category :screen="screen" />

    <el-card style="margin-top: 20px">
      <!-- 未点击新增、修改按钮显示 -->
      <div v-show="!screen">
        <el-button
          :disabled="!form.category3Id"
          icon="Plus"
          type="primary"
          @click="handleAddAttrFn"
        >
          添加平台属性
        </el-button>

        <el-table
          v-loading="loading"
          :data="attrList"
          border
          style="margin-top: 15px"
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="attrName"
            label="属性名称"
            width="150px"
          ></el-table-column>
          <el-table-column label="属性值名称">
            <template #default="{ row }">
              <el-tag v-for="item in row.attrValueList" :key="item.id">
                {{ item.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="{ row }">
              <el-button type="warning" size="small" icon="edit" @click="handleAddAttrFn(row)"></el-button>
              <el-popconfirm
                title="是否要删除该数据？"
                @confirm="handleDeleteFn(row.id)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    icon="delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="screen">
        <el-form>
          <el-form-item label="属性名称">
            <el-input
              v-model="attrParams.attrName"
              placeholder="请输入属性名称"
            ></el-input>
          </el-form-item>
          <el-button type="primary" icon="Plus" @click="addAttrFn">
            添加属性值
          </el-button>
          <el-table style="margin: 20px 0;" :data="attrParams.attrValueList" border>
            <el-table-column
              width="100px"
              type="index"
              align-center
              label="序号"
            ></el-table-column>
            <el-table-column label="属性值名称">
              <template #default="{ row, $index }">
                <el-input
                  v-model="row.valueName"
                  v-if="!row.flag"
                  v-focus
                  placeholder="请输入属性值"
                  @blur="blurInputFn(row, $index)"
                ></el-input>
                <div v-else @click="row.flag = false">{{ row.valueName }}</div>
              </template>
            </el-table-column>
            <el-table-column width="150px" label="操作">
              <template #default="{ $index }">
                <el-button type="danger" icon="Delete" @click="attrParams.attrValueList.splice($index, 1)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button :disabled="attrParams.attrValueList.length === 0 || attrParams.attrValueList.some(item => !item.flag)" type="primary" @click="handleSaveFn">保存</el-button>
          <el-button @click="handleCencalFn">取消</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<style scoped></style>
